---
title: Introduction
description: A highly customizable, accessible, and fully-featured tag input component built with shadcn/ui.
---

<ComponentPreview />

<br />

<Steps>

### Run the CLI

Run the shadcn-ui init command and setup your project with Shadcn:

<br />

```bash
npx shadcn-ui@latest init
```

### Installation

To install Emblor, run the command:

<br />

```bash
# NPM
npm install emblor
# Or, use any package manager of your choice.
```

### Usage

To use Emblor in your project, import the components you need and start using them in your application.

<br />

```tsx
import { TagInput } from 'emblor';

const [tags, setTags] = React.useState<Tag[]>([]);
const [activeTagIndex, setActiveTagIndex] = React.useState<number | null>(null);

<TagInput
  {...field}
  placeholder="Enter a topic"
  tags={tags}
  setTags={(newTags) => {
    setTags(newTags);
    setValue('topics', newTags as [Tag, ...Tag[]]);
  }}
  activeTagIndex={activeTagIndex}
  setActiveTagIndex={setActiveTagIndex}
/>;
```

### Thats it!

You have successfully integrated Emblor into your project. 🎉

</Steps>
